<template>
	<div class="flex"  v-if="!shortShow">
		<template v-for="(item,index) in activityList" :key="item.activityId">
			<div class="act-name" v-if="index<3" :class="item.checked&&item.canBuy?'txt-primary':''">{{item.activityTheme}}</div>
		</template>
		<div class="act-right van-haptics-feedback" @click="toggleShow">
			<span>更多</span><van-icon name="arrow"/>
		</div>
	</div>
	<div class="simple-dropdown-wrap" @click="toggleShow" v-else>
		<van-tag plain type="primary">促销</van-tag>
		<div class="font-12">{{shortThemeText}} <van-icon name="arrow-down" /></div>
	</div>
	<van-action-sheet v-model:show="show" title="促销活动" closeable style="height:80vh">
		<van-cell-group class="activity-group" :border="false" v-if="activityList&&activityList.length>0">
			<van-cell v-for="item in activityList" :key="item.activityId" @click="handleClick(item)" :class="item.typeCategory!=='03'?'van-haptics-feedback':''">
				<template #icon>
					<van-icon v-if="item.checked" name="checked" color="var(--van-primary-color)"/>
					<van-icon v-else-if="item.typeCategory==='03'" name="info" color="var(--van-primary-color)" class="disabled"/>
					<van-icon v-else name="circle" color="var(--font-disable-color)"/>
				</template>
				<template #title>
					<span class="mgr5">{{item.activityTheme}}</span><van-tag plain color="var(--van-primary-color)">{{item.typeName}}</van-tag>
				</template>
				<template #label>
					<div>{{item.activityContent}}</div>
					<div class="text-right">{{item.endDate}} 截止</div>
				</template>
			</van-cell>
		</van-cell-group>
		<div class="sheet-btn-wrap">
			<van-button type="primary" block round @click="toggleShow">关 闭</van-button>
		</div>
	</van-action-sheet>
</template>
<style lang="scss" scoped>
.flex{
	height:30px;font-size:12px; position:relative;
	.act-name{
		height: 14px; line-height: 14px;position: relative; color:var(--font-second-color);
		&:not(:first-child){
			padding-left:5px;margin-left:5px;
			&::before{
				content:''; position: absolute; left:-0.5px;top:0; height: 100%; width: 1px; background:var(--font-third-color);
			}
		}
	}
	.act-right{
		margin-left:auto;display:flex; align-items: center;color:var(--font-third-color); justify-content: flex-end;
		width:44px; height:30px; flex-shrink:0;
		.van-icon{font-size:14px;}
	}
}
.simple-dropdown-wrap{
	display:inline-flex;height:20px; align-items: center; color:var(--font-third-color);
	.van-tag{margin-right:4px}
}
.activity-group{
	height:calc(80vh - 98px - env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;
	.van-icon{
		font-size:16px; cursor:pointer; line-height:24px;margin-right:5px;
		&.disabled{opacity:.4;cursor:default;}
	}
	.text-right{text-align:right}
}
.sheet-btn-wrap{
	--van-button-primary-background:var(--van-primary-color)
}
</style>
<script lang="ts" setup>
//props
import {GoodsActivity} from "@/types";

const props = defineProps({
	shopId:{
		type:String,
		required:true,
	},
	gdsId:{
		type:String,
		required:true,
	},
	shortShow:{  //下拉处不展示所有活动名称，仅展示当前选中的活动名称,用于在购物车显示
		type:Boolean,
		required:false,
		default:false,
	},
	activityList:{
		type:Array<GoodsActivity>,
		required:true,
		default:[],
	}
})
//emits
const emits=defineEmits(['handleCheck'])

//data
const show=ref(false)

//method
const toggleShow =()=>{
	show.value = !show.value
}
const typeCategoryText=(code:string)=>{
	switch(code){
		case '01':return '单品优惠'
		case '02':return '订单优惠'
		case '03':return '外围优惠'
	}
}
const handleClick =(item:any)=>{
	if(item.typeCategory==='03' || !item.canBuy)	return;
	for(let act of props.activityList){
		act.checked=false
	}
	item.checked=true
	emits('handleCheck',item)
	toggleShow()
}
//computed
const shortThemeText=computed(()=>{
	let type03:GoodsActivity|null=null, canBuy:GoodsActivity|null=null
	for(let act of props.activityList){
		if(type03==null&&act.typeCategory==='03'){
			type03=act
		}else if(canBuy==null && act.canBuy && act.checked){
			canBuy = act
		}
	}
	if(canBuy!=null)	return canBuy.activityTheme
	else if(type03!=null)	return type03.activityTheme
	else	return '暂无活动'
})

//beforeMounted
//默认选中第一个可以选择、且能作用于购买售价的活动
for(let act of props.activityList){
	if(act.typeCategory!=='03' && act.canBuy){
		act.checked=true
		break;
	}
}
</script>